<style>
.tree {
  /*margin-top: 42px;*/
  border: 1px solid #d7dde4;
  /* max-height: 600px; */
}

.prodShow {
  z-index: 10000;
}
</style>
<template>
<Row class="layout-content-body">
  <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
    <Form-item label="名称" prop="Name">
      <Input v-model="formItem.Name" placeholder="请输入"></Input>
    </Form-item>
    <Form-item label="说明" prop="Remark">
      <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
      </Input>
    </Form-item>
    <Form-item>
      <Button type="primary" @click="handleSubmit('editForm')">提交</Button>
      <Button type="ghost" @click="handleReset('editForm')" style="margin-left: 8px">重置</Button>
    </Form-item>
  </Form>
  <dtable :columns="columns" :dataAll="dataAll" :totals="total" add check  delCheck @add="salesAdd" @del="salesDel" @edit="salesEdit" :loading="loading" :pageS="100"></dtable>
  <Modal title="产品" v-model="prodShow" @on-ok="prodOk" width=100 class-name="prodShow">
    <prod @handelSelect="prodSelect"></prod>
  </Modal>
  <Modal title="订单模板明细" v-model="salesShow" @on-ok="salesOk">
    <Form ref="formSales" :model="formSales" :label-width="80">
      <Form-item label="产品" prop="Name">
        <Input v-model="formSales.Name" placeholder="请输入" :disabled="!salesAd" @on-focus="prodEdit"></Input>
      </Form-item>
      <Form-item label="数量" prop="Count">
        <InputNumber :min="1" v-model.number="formSales.Count" number></InputNumber>
      </Form-item>
      <Form-item label="单价" prop="Price">
        <Input v-model.number="formSales.Price" disabled>
        </Input>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formSales.Remark">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import {
  getData
} from '@/common/utils'
// import { mapMutations, mapGetters, mapState } from 'vuex'
import dtable from '@/components/table/dtable.vue' //
import prod from '@/views/busy/prod'
var list = []
var item = {}
export default {
  data() {
    return {
      loading: false, //数据刷新遮罩层
      columns: [
        //多选框
        {
          title: '名称',
          key: 'Name',
          sortable: true
        },
        {
          title: '型号',
          key: 'Model',
          sortable: true
        },
        {
          title: '规格参数',
          key: 'Spec',
          sortable: true,
          width:380
        },
        {
          title: '价格',
          key: 'Price',
          sortable: true,
          width:80
        },
        {
          title: '数量',
          key: 'Count',
          sortable: true,
          width:80
        },
        {
          title: '金额',
          key: 'Money',
          sortable: true,
          width:80
        },
        {
          title: '说明',
          key: 'Remark',
          sortable: true,
        },
      ], //表格样式
      summary: {
        name: '合计',
        Money: 0
      },
      dataAll: [], //表格数据来源含合计
      datas: [], //表格数据来源
      formItem: {
        Id: '',
        Name: '',
        Remark: '',
        Off: 0
      }, //数据编辑表单
      formSales: {
        Id: '',
        Name: '',
        Count: 1,
        Remark: '',
        Price: 0,
        Off: 0
      },
      ruleValidate: {
        Name: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }],
      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      salesAd: false,
      prodShow: false,
      salesShow: false,
      prod: [],
      total: 0,
      tempData: this.$route.params.tempData,
    }
  },
  components: {
    dtable,
    prod,
  },
  computed: {},
  props: {

  },
  watch: {},
  methods: {
    getSummaryMoney() {
      let sum = 0
      if (this.datas) {
        for (let m in this.datas) {
          sum = sum + this.datas[m].Money
        }
      }
      return sum
    },
    getall() {
      this.loading = true
      this.dataAll.pop()
      if (this.tempData.edit) {
        this.formItem = this.tempData.temp
        this.$api.getTempitem(this.tempData.temp.Id).then(res => {
          if (!res.error) {
            this.datas = getData(res.Data)
            this.dataAll = getData(res.Data)
            if (this.dataAll) {
              for (let e in this.dataAll) {
                this.dataAll[e].Money = this.dataAll[e].Price * this.dataAll[e].Count
              }
              this.total = (this.dataAll).length
            }else{
              this.dataAll=[]
              this.datas=[]
               this.total = (this.dataAll).length
            }
            this.summary.Money = this.getSummaryMoney()
            this.dataAll.push(this.summary)
            this.loading = false
          } else {
            this.$Message.error(res.message)
          }
        })
      } else {
        this.summary.Money = this.getSummaryMoney()
        this.dataAll.push(this.summary)
        this.loading = false;
      }
      console.log("resres ",this.datas)
    },

    salesEdit(index) {
      this.salesAd = false
      this.formSales = index
      this.salesShow = true
    },
    salesAdd() {
      this.salesAd = true
      this.$refs['formSales'].resetFields()
      this.salesShow = true
    },
    salesOk() {
      this.formSales.Money = this.formSales.Price * this.formSales.Count
      this.dataAll = []
      item = getData(this.formSales)
      if (this.salesAd) {
        this.datas = this.findProdAdd(this.datas, item)
      } else {
        this.datas = this.findProdEdit(this.datas, item)
      }
      this.dataAll = getData(this.datas)
      this.summary.Money = this.getSummaryMoney()
      this.dataAll.push(this.summary)
      this.salesShow = false
    },
    salesDel(row) {
      this.$api.deleteProdType(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      })
    },
    salesDelCheck(row) {

    },
    custEdit() {
      this.custShow = true
    },
    custOk() {
      if (this.cust.length > 1) {
        this.$Message.error('客户只能选择一个');
      } else {
        this.formItem.CustId = this.cust[0].Id
        this.formItem.Cname = this.cust[0].Name
      }
    },
    custSelect(selection) {
      if (selection.length > 1) {
        this.$Message.error('客户只能选择一个');
      }
      this.cust = selection
    },
    prodEdit() {
      this.prodShow = true
    },
    prodOk() {
      if (this.prod.length > 1) {
        this.$Message.error('产品只能选择一个');
      } else {
        this.formSales.ProdId = this.prod[0].Id
        this.formSales.Price = this.prod[0].Price
        this.formSales.Name = this.prod[0].Name
        this.formSales.Cost = this.prod[0].Cost
        this.formSales.Model = this.prod[0].Model
        this.formSales.Spec = this.prod[0].Spec
      }
    },
    prodSelect(selection) {
      if (selection.length > 1) {
        this.$Message.error('产品只能选择一个');
      }
      this.prod = selection
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formItem.Tempitem = this.datas
          console.log( this.datas)
          if (!this.tempData.edit) {
            this.$api.addTemp(this.formItem).then(res => {
              if (!res.error) {
                this.$Message.success(res.message)
                this.$router.push({
                  name: '订单模板'
                })
              } else {
                this.$Message.error(res.message, 4)
              }
            })
          } else {
            this.$api.updateTemp(this.formItem).then(res => {
              if (!res.error) {
                this.$Message.success(res.message)
                this.$router.push({
                  name: '订单模板'
                })
              } else {
                this.$Message.error(res.message, 4)
              }
            })
          }
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset(name) {

    },
    findProdAdd(array, x) {
      var len = array.length,
        pos = 0;
      while (pos < len) {
        if (array[pos].ProdId === x.ProdId) { //未找到就退出循环完成搜索
          array[pos].Count = array[pos].Count + x.Count
          array[pos].Money = array[pos].Price * array[pos].Count
          break
        }
        pos += 1; //并从下个位置开始搜索
      }
      if (pos === len) {
        array.push(x)
      }
      return array
    },
    findProdEdit(array, x) {
      var len = array.length,
        pos = 0;
      while (pos < len) {
        if (array[pos].ProdId === x.ProdId) { //未找到就退出循环完成搜索
          array[pos].Count = x.Count
          array[pos].Money = array[pos].Price * array[pos].Count
          break
        }
        pos += 1; //并从下个位置开始搜索
      }
      return array
    }
  },
  mounted() {
    this.getall()
  }
}
</script>
